import { defineComponent } from "vue";
import style from "./index.module.less";
import Chart from "../Chart";
import { lineChartProps } from "./types";
import { merge } from "lodash";
import * as echarts from "echarts";
export default defineComponent({
  name: "",
  props: lineChartProps,
  setup(_) {
    const getOptions = (): echarts.EChartsOption => {
      return merge(
        {
          grid: {
            top: 10,
            bottom: 30,
            // containLabel: true,
          },
          tooltip: {},
          title: {
            text: "单位:次",
            textStyle: {
              color: "#333",
              fontSize: 10,
            },
            left: 45,
          },
          legend: {
            data: _.data.map((e) => {
              return {
                name: e.name,
                icon: "rect",
              };
            }),
            right: 10,
            itemWidth: 8,
            itemHeight: 4,
          },
          xAxis: {
            type: "category",
          },
          yAxis: {
            type: "value",
            splitNumber: 4,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#707070",
              },
            },
          },
          series: _.data.map((e) => {
            const startPoint = { x: 0, y: 0 };
            const endPoint = { x: 1, y: 1 };
            return {
              ...e,
              type: "line",
              itemStyle: {
                color: e.color,
              },
              smooth: true,
              symbol: "none",
              areaStyle: {
                color: new echarts.graphic.LinearGradient(
                  startPoint.x,
                  startPoint.y,
                  endPoint.x,
                  endPoint.y,
                  [
                    { offset: 0, color: e.areaColor[0] },
                    { offset: 1, color: e.areaColor[1] },
                  ]
                ),
              },
            };
          }),
        } as echarts.EChartsOption,
        _.options
      ) as echarts.EChartsOption;
    };
    return () => {
      return (
        <Chart options={getOptions()} class={"w-[375px] h-[250px] flex"} />
      );
    };
  },
});
